<template>
  <view class="register-bg">
    <view class="register-card">
      <view class="register-logo">
        <image src="/static/icons/face-test.png" mode="aspectFill"></image>
      </view>
      <view class="register-title">{{ t('register.title') }}</view>
      <view class="input-wrap">
        <input
          class="register-input"
          v-model="username"
          :placeholder="t('register.username')"
          placeholder-class="input-placeholder"
          maxlength="20" />
      </view>
      <view class="input-wrap">
        <input
          class="register-input"
          v-model="email"
          :placeholder="t('register.email')"
          placeholder-class="input-placeholder"
          maxlength="40" />
      </view>
      <view class="input-wrap code-row">
        <input
          class="register-input"
          v-model="code"
          :placeholder="t('register.code')"
          placeholder-class="input-placeholder"
          maxlength="6" />
        <button class="code-btn" :disabled="codeTimer > 0" @click="getCode">
          {{ codeTimer > 0 ? t('register.retry_code', { s: codeTimer }) : t('register.get_code') }}
        </button>
      </view>
      <view class="input-wrap">
        <input
          class="register-input"
          v-model="password"
          type="password"
          :placeholder="t('register.password')"
          placeholder-class="input-placeholder"
          maxlength="20" />
      </view>
      <view class="input-wrap">
        <input
          class="register-input"
          v-model="confirmPassword"
          type="password"
          :placeholder="t('register.confirm_password')"
          placeholder-class="input-placeholder"
          maxlength="20" />
      </view>
      <button class="register-btn" @click="handleRegister">{{ t('register.btn') }}</button>
      <view class="register-bottom">
        <text class="login-text" @click="goLogin">{{ t('register.to_login') }}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import { registerApi, sendCode } from '@/api/user.js'
  import { useI18n } from 'vue-i18n'
  import { onReady } from '@dcloudio/uni-app'

  export default {
    data() {
      return {
        username: '',
        email: '',
        code: '',
        password: '',
        confirmPassword: '',
        codeTimer: 0,
        codeInterval: null
      }
    },
    setup() {
      const { t } = useI18n()
      // 页面加载时设置导航栏标题
      onReady(() => {
        uni.setNavigationBarTitle({
          title: t('register.title')
        })
      })
      return { t }
    },
    methods: {
      async getCode() {
        if (!this.email) {
          uni.showToast({ title: this.t('register.input_email'), icon: 'none' })
          return
        }
        await sendCode({ email: this.email })
        uni.showToast({ title: this.t('register.code_sent'), icon: 'success' })
        this.codeTimer = 60
        this.codeInterval = setInterval(() => {
          this.codeTimer--
          if (this.codeTimer <= 0) {
            clearInterval(this.codeInterval)
            this.codeInterval = null
          }
        }, 1000)
      },
      async handleRegister() {
        if (!this.username || !this.email || !this.password || !this.confirmPassword) {
          uni.showToast({ title: this.t('register.fill_all'), icon: 'none' })
          return
        }
        if (this.password !== this.confirmPassword) {
          uni.showToast({ title: this.t('register.password_not_match'), icon: 'none' })
          return
        }
        try {
          const res = await registerApi({
            username: this.username,
            email: this.email,
            email_code: this.code,
            password: this.password,
            confirmPassword: this.confirmPassword
          })
          if (res.code === 200) {
            uni.showToast({ title: this.t('register.register_success'), icon: 'success' })
            setTimeout(() => {
              uni.reLaunch({ url: '/pages/login/index' })
            }, 1000)
          } else {
            uni.showToast({ title: res.message || this.t('register.register_failed'), icon: 'none' })
          }
        } catch (e) {}
      },
      goLogin() {
        uni.navigateTo({ url: '/pages/login/index' })
      }
    },
    onUnload() {
      if (this.codeInterval) {
        clearInterval(this.codeInterval)
      }
    }
  }
</script>

<style lang="scss">
  .register-bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60rpx;
  }
  .register-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 20px 24px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 92vw;
  }
  .register-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 18px;
    background: #fffbe6;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 60px;
      height: 60px;
    }
  }
  .register-title {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    margin-bottom: 26px;
    letter-spacing: 1px;
  }
  .input-wrap {
    width: 100%;
    margin-bottom: 16px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
    display: flex;
    align-items: center;
    height: 44px;
    box-sizing: border-box;
    &.code-row {
      padding-right: 0;
    }
  }
  .register-input {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 15px;
    padding: 0 14px;
  }
  .register-input:focus {
    border-color: #ffd700;
    background: #fff;
  }
  .input-placeholder {
    color: #bbb;
    font-size: 15px;
  }
  .code-btn {
    height: 32px;
    min-width: 90px;
    margin-right: 8px;
    background: #1296db;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;

    margin-left: 8px;
  }
  .code-btn:disabled {
    background: #eee;
    color: #bbb;
  }
  .register-btn {
    width: 100%;
    background: #1296db;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    margin-top: 6px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.08);
    transition: background 0.2s;
  }
  .register-btn:active {
    background: #19719f;
  }
  .register-bottom {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
  }
  .login-text {
    color: #ffb300;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
  }
</style>
